<template>
  <view>
    <swiper :indicator-dots="true" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff"
      :autoplay="true" :interval="3000" :duration="1000" circular>
      <swiper-item>
        <!-- img 有mode属性 支持scaleToFill,aspectFit,widthFix 等不同属性 -->
        <!-- 但据我观察, 直接在img元素设置 width:100% 可解决大部分问题 -->
        <img src="../../static/1.jpg" alt="" />
      </swiper-item>
      <swiper-item>
        <img src="../../static/2.jpg" alt="" />
      </swiper-item>
      <swiper-item>
        <img src="../../static/3.jpg" alt="" />
      </swiper-item>
      <swiper-item>
        <img src="../../static/4.jpg" alt="" />
      </swiper-item>
    </swiper>
  </view>
  <navigator url="/pages/index/index">跳转到首页</navigator>
</template>

<script>

</script>

<style lang="scss">
  swiper {
    height: 200px;

    swiper-item {
      background-color: pink;
      border-radius: 20px;
      overflow: hidden;

      img {
        width: 100vw;
      }
    }
  }
</style>